<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引入外部样式文件</title>

<!-- <link type="text/css" rel="stylesheet" href="css01.css"> -->

<style type="text/css">
	/* @import "css01.css"; 外部样式*/
	@import url("css01.css");
	
	div{ /*内部样式*/
		width: 500px;
		height: 300px;
		background-color: blue;
	}
	
	div[id=first]{/*属性选择器中的完全匹配*/
		color:black;
	}
	
	div[id^=s]{/*属性选择器中的开头匹配*/
		color:white;
	}
	
	div[id$=e]{/*属性选择器中的结尾匹配*/
		color:yellow;
	}
	
	div[id*=e]{/*属性选择器中的包含匹配*/
		background-color: orange;
	}
	
	#first{/*id选择器*/
		text-align:center;
	}
	
	.rt{/*class选择器*/
		text-align:right;
	}
	
	.rt span{/*嵌套选择器*/
		color:blue;
	}
	
	.rt .x{/*嵌套选择器*/
		color:white;
	}
	
	.rt #k{
		font-size: 20px;
	}
	
	a:HOVER {/*鼠标悬停在上面*/
		color: yellow;
	}
	
	a:VISITED {/*已经访问过，放开鼠标了*/
		color: red;
	}
	
	a:ACTIVE {/*点击正在访问，没放开鼠标*/
		color: white;
	}
	
	.a>li{/*子选择器*/
		list-style-type:none;
		color: yellow;
		border: 1px solid orange;
	}
	
	.a>li:HOVER{/*子选择器*/
		/* outline: #E9E9E9 double thin */
		outline-color:#E9E9E9;
		outline-style: double;
		outline-width: thin;
	}
</style>
<script type="text/javascript">
	alert("dfdfd");
</script>
</head>
<body style="background-color: red;"><!-- 内联样式 -->
	<div id="first" style="height:20px;">文字查看</div>
	<hr>
	<div class="rt" id="second" style="height:20px;">文字查看</div>
	<hr>
	<div class="rt" id="second2" style="height:20px;">文字查看<span>来影响我啊，<span class="x">来互相伤害</span></span></div>
	<hr>
	<div class="rt" id="three" style="height:20px;">文字查<span id="k">看</span><span id="w">看xxx</span></div>
	<hr>
	<div id="three2" style="height:20px;">文字查看</div>
	
	<a href="plan.html" target="_blank">学习计划</a>
	
css影响力：	style属性>style标签>link标签
内联样式>内部样式>外部样式

<ul class="a"><!-- 无序列表 -->
	<li>
		打蓝球
		<ul>
			<li>三分球</li>
			<li>两分球</li>
			<li>两步上篮</li>
		</ul>
	</li>
	<li>打排球</li>
	<li>唱歌</li>
</ul>
</body>
</html>